<template>
  <el-form :model="form" ref="ruleForm" label-width="88px" size="mini" disabled>
    <el-row>
      <el-col :span="12">
        <el-form-item label="字段类型" prop="fieldType">
          <el-radio-group v-model="form.fieldType">
            <el-radio
              v-for="item in dict.fieldType"
              :key="item.codevalue"
              :label="item.codevalue"
              >{{ item.codename }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="字段编码" prop="fieldCode">
          <el-input
            v-model="form.fieldCode"
            type="text"
            placeholder="请输入字段编码"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 字段类型：指标 -->
    <template v-if="form.fieldType == '1'">
      <el-row>
        <el-col :span="12">
          <el-form-item label="关联指标" prop="associativePointerName">
            <el-input
              type="text"
              v-model="form.associativePointerName"
              readonly
              placeholder="请选择关联指标"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认值" prop="defaultValue">
            <el-input
              v-model="form.defaultValue"
              type="text"
              placeholder="请输入默认值"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <!-- 字段类型：自定义 -->
    <template v-if="form.fieldType != '1'">
      <el-row>
        <el-col :span="12">
          <el-form-item label="组件类型" prop="componentType">
            <el-select
              v-model="form.componentType"
              placeholder="请选择组件类型"
              clearable
              filterable
            >
              <el-option
                v-for="item in dict.componentType"
                :key="item.codevalue"
                :label="item.codename"
                :value="item.codevalue"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.componentType == 'onlyread'" :span="12">
          <el-form-item label="标签值" prop="fieldName">
            <el-input
              v-model="form.fieldName"
              type="text"
              placeholder="请输入标签值"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-else :span="12">
          <el-form-item label="是否必填" prop="isRequested">
            <el-radio-group v-model="form.isRequested">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <!-- 组件类型：单选、多选 -->
    <template
      v-if="
        ['singleSelect', 'radio', 'multipleSelect', 'checkbox'].includes(
          form.componentType
        )
      "
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="选项设置" prop="optionSetting">
            <div
              v-for="(item, i) in form.optionSetting"
              :key="i"
              class="item-list"
            >
              <el-input v-model="item.itemvalue"></el-input>
              <el-checkbox v-model="item.isDefault">默认勾选</el-checkbox>
              <el-checkbox v-model="item.isAlarm">设为异常告警</el-checkbox>
              <!-- <el-button
                v-if="form.optionSetting.length > 1"
                type="text"
                @click="handleDeleteOptionSetting(item)"
                >移除</el-button
              > -->
            </div>
            <!-- <div>
              <el-button
                type="text"
                @click="handleAddOptionSetting"
                >添加选项</el-button
              >
            </div> -->
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <!-- 组件类型：文本框、数值 -->
    <template v-if="['text', 'number'].includes(form.componentType)">
      <el-row>
        <el-col :span="12">
          <el-form-item label="默认值" prop="defaultValue">
            <el-input
              v-model="form.defaultValue"
              type="text"
              placeholder="请输入默认值"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="异常告警" prop="warnType">
            <div class="form-item-content-box">
              <el-select
                v-model="form.warnType"
                placeholder="请选择异常告警条件"
                clearable
                filterable
              >
                <el-option
                  v-for="item in dict.warnType"
                  :key="item.codevalue"
                  :label="item.codename"
                  :value="item.codevalue"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="form.warnValue"
                type="text"
                :placeholder="
                  ['7', '8', '9', '10', '11'].includes(form.warnType)
                    ? '区间值n,m英文逗号分隔'
                    : '请输入告警值'
                "
                clearable
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <!-- 组件类型：日期、日期时间 -->
    <template v-if="['date', 'datetime'].includes(form.componentType)">
      <el-row>
        <el-col :span="24">
          <el-form-item label="默认值" prop="defaultValue">
            <el-checkbox
              v-model="form.defaultValue"
              true-label="currentDateTime"
              >当前{{ componentTypeMap[form.componentType] }}</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-form>
</template>
<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  dicts: ["fieldType", "componentType", "warnType"],
  computed: {
    // fieldTypeOptions() {
    //   if (!this.taskTemplateDetail?.associatedDevice && this.dict.fieldType) {
    //     // 若模板未关联“设备”，则不提供“指标类”选项。
    //     return this.dict.fieldType.filter((ele) => ele.codevalue != "1");
    //   }
    //   return this.dict.fieldType;
    // },
    componentTypeMap() {
      return this.dictToMap(this.dict.componentType);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-col-12{
   .el-form-item__content {
    width: 260px;
   }
}
.el-select,
.el-input-number {
  width: 100%;
}
.item-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  gap: 20px;
  .el-radio,
  .el-checkbox {
    margin-right: 0;
  }
  .el-input {
    width: 150px;
  }
}
.form-item-content-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  .el-select {
    flex: 1;
  }
  .el-input {
    flex: 1;
  }
}
</style>
